<template>
	<view>
		<u-row class="row_2">过去的我</u-row>
		<u-row>
			<u-scroll-list :indicator="indicator" style="width: 100%;margin-left:5%">
				<view v-for="(item, index) in diaryFile" :key="index"  >
					<div v-for="(file, index) in item.diaryFileId.split(',')" :key="index" style="float:left;margin-left:10px">
						<image :src="file" style="width:100px;height:100px;"></image>
					</div>
				</view>
			</u-scroll-list>
		</u-row>
		<u-row class="row_3" style="margin-left:5%">
			<u-col span="8" style="font-weight: bold;font-size: 14px;">变美历程</u-col>
			<u-col span="4" style="font-size: 12px;margin-left:10%;">时间正序</u-col>
		</u-row>
		<view v-for="(item, indexs) in diaryList" :key="item.commentId">
			<u-row style="font-size: 18px;margin-left:5%;margin-top:10px">
				{{dateFormat(item.diaryRecordTime)}}年
			</u-row>
		</view>
		<view v-for="(item, indexs) in diaryList" :key="item.commentId" v-model="item.commentDiaryRecordId" style="margin-top:20px;margin-left:5%">
			<view><u-badge :isDot="true" type="success" style="float:left;margin-top:7px"></u-badge></view>
			<view style="">{{dateFormats(item.diaryRecordTime)}}</view>
			<u-grid :border="false" @click="click" style="margin-left:5%">
				<u-grid-item  v-for="(ele,index) in item.url" :key="ele.ids" style="width:95px;height:95px">
					<img style="width:90px;height:50px:" :src="ele" @click="clickImg(item,index)"></img>
				</u-grid-item>
			</u-grid>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播样式
				indicator: false,
				// 图集查询
				diaryFile: [],
				// 日记本id
				id: '',
				// 日记查询
				diaryList: []
			}
		},
		onLoad(option) {
			this.id = option.id
			// 图集查询
			this.getdiaryFile()
			// 日记查询
			this.getDiaryById()
		},
		methods: {
			// 图片浏览
			clickImg(item,index) {
				debugger
				wx.previewImage({
					urls: item.url, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: index, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
					// 下面我这边做的都是默认的选择
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {},
							fail: function(err) {
	
							}
						}
				})
			},
			// 查询图片
			getdiaryFile(){
				uni.request({
					url: "http://localhost:8090/contents/getdiaryFile/" + this.id,                
					method: 'get',
					dataType: 'json',
					success: (res) => {
						this.diaryFile = res.data.object
					},                  
				});
			},
			// 查询日记
			getDiaryById(e){
				uni.request({
					url: "http://localhost:8090/contents/getDailyRecordById?id=" + this.id,                
					method: 'get',
					dataType: 'json',
					success: (res) => {
						this.diaryList = res.data.object
					},                  
				});
			},
			// 设置时间格式
			dateFormat(time) {
			    var date=new Date(time);
			    var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
				* */
			    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
			    return year;
			},
			// 设置时间格式s
			dateFormats(time) {
			    var date=new Date(time);
			    var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
				* */
			    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
			    return month+"-"+day;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.row_2{
		font-weight: bold;
		font-size: 14px;
		margin-left: 5%;
		margin-top:20px;
		margin-bottom: 10px;
	}
</style>
